<template>
	<div class="add-form-container">
		<Dialog :dialogVisible="addFormDialog" :title="title" @onCancal="onCancal" @onOk="onOk">
			<template slot="content">
				<el-form :model="form" ref="addForm" label-width="100px">
					<el-form-item prop="name" label="表单名称" :rules="rules.name">
						<el-input v-model="form.name"></el-input>
					</el-form-item>
				</el-form>
			</template>
		</Dialog>
	</div>
</template>

<script>
import Dialog from '@/views/components/Dialog.vue';
import { validateFormName } from '@/utils/formValidate';
import { mapState } from 'vuex';
export default {
	props: {
		addFormDialog: {
			type: Boolean,
			default: () => false
		},
		title: {
			type: String,
			default: () => ''
		}
	},
	data() {
		return {
			form: {
				name: ''
			},
			rules: {
				name: [
					{ required: true, message: '* 请输入表单名称', trigger: 'blur' },
					{ validator: validateFormName, trigger: ['blur', 'change'] }
				]
			}
		};
	},
	components: {
		Dialog
	},
	mounted() {
		this.form.name = JSON.parse(JSON.stringify(this.formName));
	},
	computed: {
		...mapState({
			formName: state => state.form.formName
		})
	},
	methods: {
		onCancal() {
			this.$refs.addForm.resetFields();
			this.$emit('onCancal');
		},
		onOk() {
			this.$refs.addForm.validate(valid => {
				if (valid) {
					this.$emit('onOk', this.form);
					this.$refs.addForm.resetFields();
				} else {
					return false;
				}
			});
		}
	}
};
</script>

<style></style>
